<template id="Pie">
  <div :id="id"  :style="chartStyle">
      <slot></slot>
  </div>
</template>

<script>
import defaultImange from './img/bgBlue.png'
export default {
  name: 'pie',
  data () {
    return {
      myChart: null
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.draw()
    })
  },
  watch: {
    seriesData () {
      this.draw()
    }
  },
  props: {
    id: {
      type: String,
      default: function () {
        let temp = []
        for (let i = 0; i < 6; i++) {
          let randomChar = String.fromCharCode(65 + Math.floor(Math.random() * 19) + i)
          temp.push(randomChar)

        }
        return temp.reduce((pre, next) => pre + next)
      }
    },
    seriesData: {
      type: Array,
      // require:true,
      default: function () {
        return []
      }
    },
    seriesName: {
      type: String,
      // require:false,
      default: '默认文字'
    },
    chartStyle: {
      type: String,
      // require:true,
      default: 'width:100%;height:100%;'
    },
    center: {
      type: Array,
      // require:true,
      default: function () {
        return ['50%', '60%']
      }
    },
    fileName: {
      type: String,
      default: 'echarts'
    },
    toolboxRight: {
      type: String,
      default: '0px'
    },
    toolboxTop: {
      type: String,
      default: '55px'
    },
    itemColor: {
      type: Array,
      default: function () {
        return ['#5f9dff', '#6be1c1', '#ffd86e', '#ee5959', '#7d92d4']
      }
    },
    radius: {
      type: String,
      default: '65%'
    },
    showDownloadIcon: {
      type: Boolean,
      default: true
    },
    tooltippadding: {
      default: function () {
        return [17, 20, 17, 22]
      }
    }
  },
  methods: {
    draw () {
      // let myChart = this.$echarts.init(document.getElementById(this.id))
      if (document.getElementById(this.id)) {
        this.myChart = this.myChart == null ? this.$echarts.init(document.getElementById(this.id)) : this.myChart
        this.myChart.setOption({
          color: this.itemColor,
          tooltip: {
            padding: this.tooltippadding,
            trigger: 'item',
            formatter: function (param) {
              return param.marker + param.name + '：' + param.value + '<br>'
            },
            backgroundColor: 'rgba(50, 50, 50, 0.7)',
            borderColor: 'rgb(51, 51, 51)',
            borderWidth: 0,
            textStyle: {
              color: '#fff',
              fontSize: 12,
              fontFamily: '宋体'
            }
          },
          toolbox: {
            right: this.toolboxRight,
            top: this.toolboxTop,
            show: this.showDownloadIcon,
            iconStyle: {
              normal: {
                borderColor: '#5c6781'
              },
              emphasis: {
                borderColor: '#4990ff'
              }
            },
            orient: 'horizontal',
            itemGap: 10,
            itemSize: 84,
            showTitle: true,
            feature: {
              saveAsImage: {
                show: true,
                name: this.fileName,
                title: ' ',
                icon: 'image://' + defaultImange
              }
            }
          },
          series: [{
            name: this.seriesName,
            type: 'pie',
            radius: '65%',
            // avoidLabelOverlap: false,
            center: this.center,
            selectedMode: 'single',
            hoverAnimation: false,
            hoverOffset: 30,
            label: {
              normal: {
                show: true
              },
              emphasis: {
                show: true
              }
            },
            labelLine: {
              normal: {
                show: true,
                lineStyle: {
                  color: '#b1b1b1'
                }
                // length:30,
                // length2:15
              },
              emphasis: {
                show: true
              }
            },
            data: this.seriesData,
            itemStyle: {
              emphasis: {
                // color:this.itemColor,
                shadowBlur: 0,
                shadowOffsetX: 0,
                label: {
                  textStyle: {
                    fontFamily: '宋体'
                  }
                }
              }
            }
          }]
        })
        this.myChart.resize()
      }
    }
  }
}
</script>

